<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jw demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="../src/jw.css" />
<style>

.demo,p{border:1px dashed gray;margin:10px;padding:10px}
</style>
<script src="jquery-1.6.4.js"></script>
<script src="../src/jw.js"></script>
<script src="demo.js"></script>
</head>
<body>
<h1>dialog</h1>
<pre>
/**
*@param object option
   object 可选参数
   {
          width:300,            //宽度
          height:100,           //高度 
          close:true,           //显示关闭按钮 
          drag:true,            //是否支持拖动  
          over:true,            //是否显示遮罩层
          fixed:true,           //窗口位置是否固定
          id:null,              //将指定id的内容作为body
          html:null,            //使用此html代码作为body
          title:'',             //窗口标题
          rel:null,             //ajax加载窗体的地址 
          iframe:null,          //使用iframe的地址 
          iframeScroll:true,    //iframe是否显示滚动栏
          iframeFetchTitle:true,//是否对同域名的iframe的标题自动更新到title
          zIndex:301,           //dialog的层次 
          onLoad:function(){},  //窗口内容装载完成后的回调函数 
          target:window         //dialog窗口载体，默认为当前窗口，可以是windoww.top、window.parent等
        }
*/
<font color=blue>jw.dialog(option);</font>

</pre>
<p class="demo"><input type="button" onclick="jw.dialog({iframe:'http://www.baidu.com',width:800,height:450});" value="iframe 不同域名"></p>
<p class="demo"><input type="button" onclick="jw.dialog({iframe:'http://www.baidu.com',width:'80%',height:'60%'});" value="iframe 百分比宽度高度"></p>
<p class="demo"><input type="button" onclick="jw.dialog({iframe:'http://www.baidu.com',width:800,height:300,over:false});" value="iframe 没有遮罩层"></p>

<p class="demo"><input type="button" onclick="jw.dialog({iframe:'iframe.html'});" value="iframe 同域名,自适应大小"></p>
<p class="demo"><input type="button" onclick="jw.dialog({iframe:'iframe1.html',title:false});" value="iframe 无标题"></p>
<p class="demo"><input type="button" onclick="jw.dialog({iframe:'iframe.html',title:'我的标题',iframeFetchTitle:false});" value="iframe 同域名,不使用iframe的title"></p>
<p class="demo"><button onclick="jw.dialog({rel:'_load.html'});return false;">ajax加载内容</button></p>
<p class="demo"><input type="button" onclick="jw.dialog({iframe:'iframe.html',target:window.top});" value="iframe 同域名的最上层窗口创建"></p>
<div class="demo">
	<input type="button" onclick="jw.dialog({id:'#dialog001'});" value="将隐藏的区块作为内容">
	<div id="dialog001" style="display:none">这块是隐藏的内容！</div>
</div>
<div class="demo">
	<input type="button" onclick="jw.dialog({html:'你好阿<div id=dialog_b></div>',onLoad:function(){$('#dialog_b',this.bd).html('onload事件触发');}});" value="指定body的html">
</div>
<hr/>

<h1>alert</h1>
<div>
<pre>
/**
*@param string text 显示的内容
*@param object option 
  {icon:1,                     //图标,详见图标说明
   ok:"确 定",                //确定按钮的文字
   onOk:function(){},        //点击确定按钮执行的回调函数
   cancle:null,              //是否显示取消按钮||取消按钮的文字
   onCancle:function(){},    //点击取消按钮时执行的回调函数
   title:'提示',              //标题
   }
*/
<font color=blue>jw.alert(text,option);</font>
</pre>
</div>
<p class="demo"><input type="button" onclick="jw.alert('这是一个alert!');" value="默认图标"></p>
<p class="demo"><input type="button" onclick="jw.alert('这是一个alert!',{icon:3});" value="指定图标1"></p>
<p class="demo"><input type="button" onclick="jw.alert('这是一个alert!',{icon:4});" value="指定图标2"></p>
<p class="demo"><input type="button" onclick="jw.alert('这是一个alert!',{icon:'4x2'});" value="指定图标3"></p>
<p class="demo"><input type="button" onclick="jw.alert('这是一个alert!',{icon:'7',time:2000});" value="alert 2'后关闭"></p>
<p class="demo"><input type="button" onclick="jw.alert('这是一个alert!',{icon:'7',time:2000,onOk:function(){alert('马上关闭')}});" value="alert 2'后关闭,并执行回调"></p>
<p class="demo"><input type="button" onclick="jw.alert('这是一个alert!',{onOk:function(){alert(1)}});" value="点击确定时回调"></p>
<p class="demo"><input type="button" onclick="jw.alert('这是一个alert!',{cancle:'取消',onCancle:function(){alert('cancle')}});" value="显示取消按钮"></p>
<p class="demo"><input type="button" onclick="jw.alert('<input type=text id=\'a\'>',{title:'请输入',cancle:'取消',onOk:function(){var a=$('#a').val();if(a==''){alert('请输入内容');return false;}alert(a)}});" value="显示HTML(模拟prompt)（回调返回false阻止关闭）"></p>
<div>
<div>以下是所有的图标,每个图标尺寸为width=50px,height=50px</div>
jw.alert('这是一个alert!','<font color=red>13x2</font>')表示使用坐标 x=13,y=2 位置的图标
<br/><br/>

<div>
<div style="float:left;margin-top:30px">
<script>
var tmp="<div style='height:50px;width:30px;text-align:right;padding-right:10px'>";
for(var i=1;i<4;i++){
    document.write(tmp+i+"</div>");
}
document.write(tmp+"<font color=red>Y</font></div>");
</script>
</div>
<div style="padding-left:30px">
<script>
var tmp="<span style='width:50px;display:inline-block;text-align:center'>";
for(var i=1;i<12;i++){
	document.write(tmp+i+"</span>");
}
document.write(tmp+"<font color=red>X</font></span>");
</script>
<div><img src="../src/jw-icons.gif" style="border:1px solid blue;border-bottom:none;border-right:none"></div>
</div>
</div>
</div>
<div style="clear:both"></div>
<hr/>

<h1>msg</h1>
可以用来代替alert使用
<pre>
/**
*@param string text           显示的内容
*@param int time              显示的持续时间
*@param function callBackFn   提示框消失时执行的回调函数 
*/
<font color=blue>jw.msg(text,time,callBackFn)</font>
</pre>
<p class="demo"><input type="button" onclick="jw.msg('你好'+Math.random());" value="默认显示提示信息，持续显示3秒"></p>
<p class="demo"><input type="button" onclick="jw.msg('你好,这个停留显示5秒,隐藏时弹出对话框',5000,function(){alert('5秒后')});" value="5秒后隐藏，并执行回调函数"></p>
<hr/>

<h1>drag</h1>
<pre>
/**
*@param string bar    拖动的区域
*@param string target 被拖动的空间
*@param window win    目标窗口 如window.top
*/
<font color=blue>jw.drag(bar,target,win)</font>
</pre>
<div style="height:750px">

<div class="demo">
	<div id="drag001" style='border:1px solid blue;width:300px'>drag me 1</div>
	<script>jw.drag("#drag001");</script>
</div>

<div class="demo">
<div id="drag002" style='border:1px solid blue;position:fixed;top:50px;right:20px;width:200px'>drag me but i'm fixed</div>
<script>
jw.drag("#drag002");
jw.position_fixed("#drag002");
</script>
</div>

<div class="demo">
	<div id="drag004" style='border:1px solid blue; width:300px;height:200px'>
		<div class="hd" style='background:gray;width:100%'>drag me 3</div>
		<div>this is body
		 <div>jw.drag("#drag004 .hd","#drag004");</div>
		</div>
	</div>
	</div>
	<script>
	  jw.drag("#drag004 .hd","#drag004");
	</script>
</div>

<hr/>

<h1>position_fixed</h1>
<div class="demo">
<div id="fixed01" style="position:fixed;top:100px;right:20px;width:100px;height:100px;border:1px solid red;background:#fff">
元素窗口位置固定，支持ie6。
</div>
<script>jw.position_fixed("#fixed01");</script>
</div>
<hr/>

<h1>tab选项卡</h1>
<pre>
<font color=blue>jw.tab(headItems, contentItems,fn)</font>
</pre>

<div class="demo">
<div id="tab01" class='jw-tab'>
   <div class="hd"><ul><li><a>第一</a></li><li><a>第二</a></li><li><a>第三</a></li></ul></div>
   <div class='bd'>
      <div>第一个选项卡的内容</div>
      <div>第二个选项卡的内容</div>
  </div>
</div>
<script>
jw.tab("#tab01 .hd li","#tab01 .bd>div",function(i,e){ if(i==2){alert($(this).text());return false;}});
</script> 
</div>

<div class="demo">
<input type="button" value="test" onclick="test_pbar()">
<div id="process-bar"></div>
<script>
var b=jw.processbar("#process-bar",10);
function test_pbar(){
	b.val(10);
	function a(){
		setTimeout(function(){
	      var v=b.val();
			b.val(v+1);
			if(v<100)a();
		},100);
	}
	a();
}
</script>
</div>

</body>
</html>
